// SQL Generator 渲染器
window.SQLGeneratorRenderer = class SQLGeneratorRenderer {
    static getHTML() {
        return `
            <h2 class="text-2xl font-bold text-gray-800 mb-6">SQL IN 生成器</h2>
            
            <div class="mb-6">
                <label class="block text-gray-700 text-sm font-bold mb-2" for="sql-input">
                    输入值 (每行一个值)
                </label>
                <textarea id="sql-input" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 code-editor" rows="8" placeholder="值1&#10;值2&#10;值3"></textarea>
                <div class="mt-2 text-sm text-gray-500">
                    已输入 <span id="line-count">0</span> 行，<span id="non-empty-count">0</span> 个有效值
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="sql-column">
                        列名
                    </label>
                    <input id="sql-column" type="text" class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" value="id" placeholder="例如: id">
                </div>
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2">
                        引号类型
                    </label>
                    <div class="flex space-x-4">
                        <label class="inline-flex items-center">
                            <input type="radio" class="form-radio text-blue-600" name="quote-type" value="single" checked>
                            <span class="ml-2">单引号 (')</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" class="form-radio text-blue-600" name="quote-type" value="double">
                            <span class="ml-2">双引号 (")</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="radio" class="form-radio text-blue-600" name="quote-type" value="none">
                            <span class="ml-2">无引号</span>
                        </label>
                    </div>
                </div>
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-2">
                        选项
                    </label>
                    <div class="space-y-2">
                        <label class="inline-flex items-center">
                            <input type="checkbox" class="form-checkbox text-blue-600" id="remove-duplicates">
                            <span class="ml-2">去除重复值</span>
                        </label>
                        <label class="inline-flex items-center">
                            <input type="checkbox" class="form-checkbox text-blue-600" id="sort-values">
                            <span class="ml-2">排序</span>
                        </label>
                    </div>
                </div>
            </div>

            <div class="flex flex-wrap gap-3 mb-6">
                <button id="generate-sql" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                    <i data-feather="database" class="w-4 h-4 mr-2"></i>
                    生成 SQL
                </button>
                <button id="clear-sql" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                    <i data-feather="trash-2" class="w-4 h-4 mr-2"></i>
                    清空
                </button>
                <button id="copy-sql" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center tooltip" data-tooltip="复制结果">
                    <i data-feather="copy" class="w-4 h-4 mr-2"></i>
                    复制结果
                </button>
                <button id="download-sql" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-200 flex items-center">
                    <i data-feather="download" class="w-4 h-4 mr-2"></i>
                    下载 SQL
                </button>
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2" for="sql-output">
                    生成的 SQL 语句
                </label>
                <textarea id="sql-output" class="w-full px-3 py-2 text-gray-700 border rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 code-editor" rows="6" readonly></textarea>
            </div>
        `;
    }

    static init() {
        const sqlInput = document.getElementById('sql-input');
        const sqlOutput = document.getElementById('sql-output');
        const generateBtn = document.getElementById('generate-sql');
        const clearBtn = document.getElementById('clear-sql');
        const copyBtn = document.getElementById('copy-sql');
        const downloadBtn = document.getElementById('download-sql');

        // 统计输入
        const updateStats = () => {
            const lines = sqlInput.value.split('\n');
            const nonEmptyLines = lines.filter(line => line.trim() !== '');
            document.getElementById('line-count').textContent = lines.length;
            document.getElementById('non-empty-count').textContent = nonEmptyLines.length;
        };

        sqlInput.addEventListener('input', updateStats);

        generateBtn.addEventListener('click', () => {
            const input = sqlInput.value;
            const column = document.getElementById('sql-column').value || 'id';
            const quoteType = document.querySelector('input[name="quote-type"]:checked').value;
            const removeDuplicates = document.getElementById('remove-duplicates').checked;
            const sortValues = document.getElementById('sort-values').checked;

            DevToolsUtils.addLoading(generateBtn);

            setTimeout(() => {
                const sql = SQLGenerator.generate(input, {
                    column,
                    quoteType,
                    removeDuplicates,
                    sortValues
                });
                
                sqlOutput.value = sql;
                DevToolsUtils.removeLoading(generateBtn);
                DevToolsUtils.addSuccessBorder(sqlOutput);
                
                if (sql) {
                    DevToolsUtils.showToast('SQL 生成成功！');
                }
            }, 300);
        });

        clearBtn.addEventListener('click', () => {
            sqlInput.value = '';
            sqlOutput.value = '';
            updateStats();
            DevToolsUtils.removeStatusBorder(sqlOutput);
        });

        copyBtn.addEventListener('click', async () => {
            if (sqlOutput.value) {
                await DevToolsUtils.copyToClipboard(sqlOutput.value);
                DevToolsUtils.showToast('已复制到剪贴板！');
            } else {
                DevToolsUtils.showToast('没有可复制的内容', 'error');
            }
        });

        downloadBtn.addEventListener('click', () => {
            if (sqlOutput.value) {
                DevToolsUtils.downloadFile(sqlOutput.value, 'generated.sql', 'text/sql');
                DevToolsUtils.showToast('文件下载成功！');
            } else {
                DevToolsUtils.showToast('没有可下载的内容', 'error');
            }
        });

        updateStats();

        // 初始化 Feather 图标
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }
};